import React from 'react';
import ReactDOM from 'react-dom';
import { Breadcrumb, Button, Upload, Icon, Message, Modal, Form } from 'antd';
const confirm = Modal.confirm;

const BulkImport = React.createClass({

  getInitialState() {
    return {
      visible: false
    }
  },

  importTenement(info) {
    var data = new FormData();
    var blob = new Blob([info.originFileObj], {type: info.type}); // 传入一个合适的MIME类型
    data.append('file', blob, info.name);
    data.append('isCoverage', 1);
    var req = new XMLHttpRequest();
    req.open("POST", Utils.apiServer + '/tenement/importExcel', true);
    console.log('5555');
    req.onload = function(event) {
      let result = JSON.parse(req.responseText)
      if (req.status == 200) {
        if (result.code == 200) {
          Message.success(`恭喜您，房源导入成功，请至房源管理查看房源信息`);
        } else {
          Message.error( `很遗憾，房源导入失败，请重新导入`,  10);
        }
      } else {
        Message.error(`请求出错~`, 10);
      }
    };
    req.send(data);
  },

  importRoomRent(info) {
    console.log(info)
    var data = new FormData();
    var blob = new Blob([info.originFileObj], {type: info.type}); // 传入一个合适的MIME类型
    data.append('file', blob, info.name);
    data.append('isCoverage', 1);
    var req = new XMLHttpRequest();
    req.open("POST", Utils.apiServer + '/roomRent/importExcel', true);
    req.onload = function(event) {
      let result = JSON.parse(req.responseText)
      if (req.status == 200) {
        if (result.code == 200) {
          Message.success(`恭喜您，房间导入成功，请至出租管理查看房源信息`);
        } else {
          Message.error( `很遗憾，房间导入失败，请重新导入`,  10);
        }
      } else {
        Message.error( `请求出错~`, 10);
      }
    };
    req.send(data);
  },
  importRoomDecoration(info) {
    console.log(info)
    var data = new FormData();
    var blob = new Blob([info.originFileObj], {type: info.type}); // 传入一个合适的MIME类型
    data.append('file', blob, info.name);
    data.append('isCoverage', 1);
    var req = new XMLHttpRequest();
    req.open("POST", Utils.apiServer + '/decorate/importExcel', true);
    req.onload = function(event) {
      let result = JSON.parse(req.responseText)
      if (req.status == 200) {
        if (result.code == 200) {
          Message.success(`恭喜您，房间装修导入成功，请至出租管理查看房源信息`);
        } else {
          Message.error( `很遗憾，房间装修导入失败，请重新导入`, 10);
        }
      } else {
        Message.error( `请求出错~`,  10);
      }
    };
    req.send(data);
  },

  showNotes() {
    this.setState({
      visible: true
    })
  },

  handleCancel() {
    this.setState({
      visible: false,
    });
  },

  render () {
    const _me = this;
    const tenement = {
      name: 'file',
      action: Utils.apiServer + '/tenement/importExcel',
      beforeUpload(file) {
        const isCSV = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isCSV) {
          Message.error( '只能上传Excel文件哦！',  10);
          return isCSV;
        }

      },
      onChange(info) {
        if (info.file.status === 'done') {
          if (info.file.response.code == 200 ) {
            Message.success(`恭喜您，房源导入成功，请至房源管理查看房源信息`);
          } else if (info.file.response.code == 900){
            confirm({
              title: '警告',
              content: info.file.response.message,
              onOk() {
                _me.importTenement(info.file);
              },
              onCancel() {},
            });
          } else {
            Message.error(info.file.response.message, 10);
          }
        } else if (info.file.status === 'error') {
          Message.error(`很遗憾，房源导入失败，请重新导入`,10);
        }
      },
    };
    const roomRent = {
      name: 'file',
      action: Utils.apiServer + '/roomRent/importExcel',
      beforeUpload(file) {
        const isCSV = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isCSV) {
          Message.error( '只能上传Excel文件哦！',10);
          return isCSV;
        }
      },
      onChange(info) {
        if (info.file.status === 'done') {
          if (info.file.response.code == 200 ) {
            Message.success(`恭喜您，房间导入成功，请至出租管理查看房间信息`);
          } else if (info.file.response.code == 900){
            confirm({
              title: '警告',
              content: info.file.response.message,
              onOk() {
                _me.importRoomRent(info.file);
              },
              onCancel() {},
            });
          } else {
            Message.error(info.file.response.message,10);
          }
        } else if (info.file.status === 'error') {
          Message.error( `很遗憾，房间导入失败，请重新导入`,  10);
        }
      },
    };

    const roomDecoration = {
      name: 'file',
      action: Utils.apiServer + '/decorate/importExcel',
      beforeUpload(file) {
        console.log(file)
        const isCSV = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isCSV) {
          Message.error( '只能上传Excel文件哦！', 10);
          return isCSV;
        }
      },
      onChange(info) {
        if (info.file.status === 'done') {
          if (info.file.response.code == 200 ) {
            Message.success(`恭喜您，房间装修导入成功，请至出租管理房间装修`);
          } else if (info.file.response.code == 900){
            confirm({
              title: '警告',
              content: info.file.response.message,
              onOk() {
                _me.importRoomDecoration(info.file);
              },
              onCancel() {},
            });
          } else {
            Message.error( info.file.response.message, 10);
          }
        } else if (info.file.status === 'error') {
          Message.error( `很遗憾，房间装修导入失败，请重新导入`,  10);
        }
      },
    };


    return (
      <div>
        <div className="nav-bar">
          <Breadcrumb separator="-" >
            <Breadcrumb.Item>批量导入</Breadcrumb.Item>
          </Breadcrumb>
        </div>

        <div className="content-wrapper ">
          <div className="import-notes">
            温馨提示：可以批量导入房源信息、房间租赁信息，为您实现一键录入、快捷管理
          </div>
          <div className="inner-content import-content">
            <div>1、下载导入摸板，按模板填写导入信息：
              <a onClick={this.showNotes}>【导入提示】</a>
              <a href={Utils.apiServer + '/tenement/export'} target="_blank">下载房源模板</a>
              {/*<a href={Utils.apiServer + '/tenement/export'} target="_blank">下载房源消费模板</a>
              <a href={Utils.apiServer + '/roomRent/export'} target="_blank">下载房间消费模板</a>*/}
              <a href={Utils.apiServer + '/decorate/export'} target="_blank">下载房间装修模板</a>
              <a href={Utils.apiServer + '/roomRent/export'} target="_blank">下载房间租赁模板</a>
            </div>
            <div>2、选择要上传的文件：
              <Upload {...tenement}>
                <Button type="ghost">
                  <Icon type="upload" /> 房源导入
                </Button>
              </Upload>
              <Upload {...roomDecoration}>
                <Button type="ghost">
                  <Icon type="upload" /> 房间装修导入
                </Button>
              </Upload>
              <Upload {...roomRent}>
                <Button type="ghost">
                  <Icon type="upload" /> 房间租赁导入
                </Button>
              </Upload>
            </div>
          </div>
        </div>
        <Modal title="导入提示" style={{marginTop: 220}} visible={this.state.visible} onCancel={this.handleCancel} footer="" >
          <div>
            <ul style={{marginLeft: 20, color: '#999'}}>
              <li>1、【房源模板】可对房屋业主处租赁的房屋进行统一导入，【房间装修模板】可对房东装修后的房间进行统一导入</li>
              <li>2、模板里有示例数据，导入前请删除示例数据</li>
              <li>3、导入时，导入的房屋名称/房间与已存在信息相同时，会自动覆盖原有数据，电话号码相同时，会自动获取原有数据。</li>
              <li>4、房屋地址/房间名称为系统唯一识别信息，请务必准确填写</li>
              <li>5、请先添加【房源模板】，再行添加【房屋装修模板】、【房间租赁模板】</li>
              <li>6、模板标题，属于基础信息项，不可以进行添删</li>
              <li>7、【房源模板】，只可管理固定租金的房源；如房源租金不固定，请至意向房源—添加意向房源处进行添加</li>
            </ul>
          </div>
        </Modal>
      </div>
    );
  }
});

export default BulkImport;